<template>
  <div class="jyhqk w100">
    <div class="header space-between align-center">
      <div class="flex align-center">
        <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang3_f8f39a01722849fbb749aefb25d9c755.png'" class="img" />
        <div class="name">经营户情况</div>
      </div>
      <img
        v-show="show"
        @click="handleClick"
        :src="imgUrl + '/profile/personinfo/2023/6/20/lang2_d966d366dae5476a8e6889b30b1b8c82.png'"
        class="img1"
      />
    </div>
    <div class="list space-between">
      <div class="list-width1">
        <div>经营户数量</div>
        <div class="list-bg w100 space-between align-center">{{ info.val13 || 0 }} 个</div>
      </div>
      <div class="list-width1">
        <div>企业经营户占比</div>
        <div class="list-bg w100 space-between align-center">{{ info.val14 || 0 }} %</div>
      </div>
      <div class="list-width1">
        <div>流转农田面积</div>
        <div class="list-bg w100 space-between align-center">{{ Number(info.val15).toFixed(2) || 0 }} 亩</div>
      </div>
    </div>
    <div class="bar w100 flex">
      <div class="h100p w100" v-if="info.val16" ref="bar"></div>
      <img
        v-else
        :src="imgUrl + '/profile/personinfo/2023/6/20/yangcnone_47b17c8e40d24d808b3915caa5efc495.png'"
        style="width: 1.2rem; height: 1.2rem; margin: auto; display: block"
      />
    </div>
    <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang4_73a1fc1e81c446e5894ac4101272c833.png'" class="img2 w100" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Jyhqk',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API
    }
  },
  mounted() {
    this.bar()
  },
  methods: {
    bar() {
      if (this.info.val16) {
        const arr = this.info.val16.split(',')
        const option = {
          grid: {
            top: '10%',
            bottom: '10%',
            left: '5%',
            right: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['50亩以下', '50～100亩', '100～300亩', '300～500亩', '500～800亩', '1000亩以上'],
            axisLabel: {
              show: true,
              color: '#ffffff',
              fontSize: 12
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              color: '#ffffff',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                type: 'dashed', //虚线
                color: ['#0D97EB']
              },
              show: true //隐藏
            }
          },
          color: ['#00F2FE'],
          series: [
            {
              data: arr,
              type: 'bar',
              barWidth: '25',
              showBackground: true,
              backgroundStyle: {
                color: '#0083D8'
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00F2FE'
                  },
                  {
                    offset: 1,
                    color: '#00F2FE'
                  }
                ])
              }
            }
          ]
        }
        const echart = this.$echarts.init(this.$refs.bar)
        echart.setOption(option, true)
      }
    },
    handleClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.jyhqk {
  //height: 4.16rem;
  height: calc((100vh - 1.2rem) / 3);

  .header {
    width: 100%;
    background-size: 100% 100%;
    font-size: 0.18rem;
    height: 0.42rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang7_a953852ebaf143d2994fe879e106efda.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;

    .img {
      width: 0.16rem;
      height: 0.14rem;
      margin-left: 0.1rem;
      margin-right: 0.15rem;
    }

    .img1 {
      width: 0.36rem;
      height: 0.16rem;
      margin-right: 0.1rem;
    }
  }

  .list {
    width: 6.3rem;
    margin: 0.1rem auto;

    .list-width1 {
      width: 2.090875rem;
      font-size: 0.14rem;

      .list-bg {
        margin-top: 0.1rem;
        background-size: 100% 100%;
        font-size: 0.2rem;
        padding-left: 0.1rem;
        color: #00cdff;
        height: 0.43rem;
        background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang8_f7bfc9009903420bbf7db883a8bd4b80.png');
        background-repeat: no-repeat;
        background-position-x: center;
        box-sizing: border-box;
      }
    }
  }

  .bar {
    height: 2.55rem;
    width: 100%;
  }
}
</style>